/* eslint-disable prefer-promise-reject-errors */
// 注册
import React from 'react';
import { action } from 'mobx';
import { observer, useLocalStore } from 'mobx-react-lite';
import { Input, Select, Form, Checkbox, Button, message, Modal } from 'antd';
import {
  UserOutlined,
  UnlockOutlined,
  MobileOutlined,
  MailOutlined,
} from '@ant-design/icons';
import * as loginApi from '~/apis/login/loginApi';

const FormItem = Form.Item;
const Option = Select.Option;

export const RegisterModal = observer((props: any) => {
  const [form] = Form.useForm();

  const state = props.state;

  const localState = useLocalStore(() => ({
    orgTypeList: [],
  }));

  const getOrgType = () => {
    loginApi.orgType().then((res) => {
      localState.orgTypeList = res.data;
    });
  };

  // 注册
  const onRegister = (values: any) => {
    if (!values.agree) {
      message.error('Please read the disclaimer!');
      return;
    }
    delete values.agree;
    delete values.password1;
    loginApi.register(values).then(() => {
      message.success('register success');
      state.visible = false;
    }).catch(() => {
      message.error('register fail');
    });
  };

  const handleCancel = action(() => {
    state.visible = false;
  });

  React.useEffect(() => {
    getOrgType();
  }, []);

  return (
    <Modal
      title="REGISTER"
      visible={state.visible}
      onCancel={handleCancel}
      width='380px'
      footer={null}
    >
      <Form className="login-wrap" form={form} onFinish={onRegister}>
        <FormItem
          name="username"
          rules={[{ required: true, message: 'Please input your username!' }]}
        >
          <Input
            size="large"
            type="text"
            allowClear
            placeholder="Username"
            prefix={<UserOutlined className="prefix-icon"/>}
          />
        </FormItem>
        <FormItem
          name="institution"
          rules={[{ required: true, message: 'Please select your institution type!' }]}
        >
          <Select
            placeholder="institution type"
            allowClear
          >
            {
              localState.orgTypeList.map((item: any) => <Option value={item.id}>{item.note}</Option>)
            }
          </Select>
        </FormItem>
        <FormItem
          name="phone"
        >
          <Input
            size="large"
            allowClear
            type="text"
            placeholder="Mobile phone number"
            prefix={<MobileOutlined className="prefix-icon"/>}
          />
        </FormItem>
        <FormItem
          name="email"
          rules={[
            { required: true, message: 'Email is required' },
            { type: 'email', message: 'The input is not valid E-mail!' },
          ]}
        >
          <Input
            size="large"
            allowClear
            type="text"
            placeholder="Email"
            prefix={<MailOutlined className="prefix-icon"/>}
          />
        </FormItem>
        <FormItem
          className="mb-4"
          name="password"
          rules={[{ required: true, message: 'Please input your password!' }]}
        >
          <Input
            size="large"
            allowClear
            placeholder="Password,6-20 characters"
            type="password"
            prefix={<UnlockOutlined className="prefix-icon"/>}
          />
        </FormItem>
        <FormItem
          className="mb-4"
          name="password1"
          rules={[
            { required: true, message: 'Please confirm the password again!' },
            ({ getFieldValue }) => ({
              validator(_rule, value) {
                if (!value || getFieldValue('password') === value) {
                  return Promise.resolve();
                }
                return Promise.reject('The two passwords that you entered do not match!');
              },
            }),
          ]}
        >
          <Input
            allowClear
            size="large"
            placeholder="Confirmed password"
            type="password"
            prefix={<UnlockOutlined className="prefix-icon"/>}
          />
        </FormItem>
        <FormItem
          className="mb-4"
          name="agree"
          valuePropName="checked"
        >
          <Checkbox>I already read and agree<a href="">&lt;Disclaimer of PPP&gt;</a></Checkbox>
        </FormItem>
        <div className="mb-4">
          <Button className="w-full" size="large" type="primary" htmlType="submit">Register</Button>
        </div>
        <a className="link" onClick={() => { state.visible = false; }}>Already registered?Please Login</a>
      </Form>
    </Modal>
  );
});
